/* eslint-disable react-hooks/exhaustive-deps */
/* eslint-disable @typescript-eslint/ban-types */
/* eslint-disable @typescript-eslint/no-explicit-any */
import React, { useEffect, useState } from "react";
import {
  Input,
  Select,
  Button,
  Form,
  Col,
  Row,
  Space,
  Upload,
  DatePicker,
  Modal,
  Switch,
} from "antd";
import { PlusOutlined } from "@ant-design/icons";
import moment from "moment";
import { VehicleFormProps } from "./interfaceType";
const formItemLayout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 14 },
};
const VehicleForm: React.FC<VehicleFormProps> = ({
  fileList,
  previewImage,
  handleChange,
  setFileList,
  onFinish,
  fileList1,
  previewImage1,
  handleChange1,
  setFileList1,
  fileList2,
  previewImage2,
  handleChange2,
  setFileList2,
  editMode,
  selectedRecord,
  Store,
  previewOpen,
  setPreviewOpen,
  handleCancel,
  previewOpen1,
  setPreviewOpen1,
  handleCancel1,
  previewOpen2,
  setPreviewOpen2,
  handleCancel2,
  vesearch,
}) => {
  const { Option } = Select;
  const [form] = Form.useForm();
  const [modifiedImageUrl, setModifiedImageUrl] = useState<string | undefined>(
    previewImage
  );
  const [modifiedImageUrl1, setModifiedImageUrl1] = useState<
    string | undefined
  >(previewImage1);
  const [modifiedImageUrl2, setModifiedImageUrl2] = useState<
    string | undefined
  >(previewImage2);
  const [vstatusSwitch, setVstatusSwitch] = useState<boolean>(false);
  const uploadButton = (
    <button style={{ border: 0, background: "none" }} type="button">
      <PlusOutlined />
      <div style={{ marginTop: 8 }}>Upload</div>
    </button>
  );
  const onSwitchChange = (checked: boolean) => {
    setVstatusSwitch(checked);
  };
  useEffect(() => {
    if (editMode && selectedRecord) {
      form.setFieldsValue({
        ...selectedRecord,
        constructiontime: selectedRecord.constructiontime
          ? moment(selectedRecord.constructiontime)
          : null,
        inspectannuallyDate: selectedRecord.inspectannuallyDate
          ? moment(selectedRecord.inspectannuallyDate)
          : null,
        annualInsuranceDate: selectedRecord.annualInsuranceDate
          ? moment(selectedRecord.annualInsuranceDate)
          : null,
      });
      setModifiedImageUrl(selectedRecord.image.replace(/\/upload/, "/upload/"));
      setModifiedImageUrl1(
        selectedRecord.inspectannuallyProve.replace(/\/upload/, "/upload/")
      );
      setModifiedImageUrl2(
        selectedRecord.annualInsuranceImg.replace(/\/upload/, "/upload/")
      );
      setFileList([
        { url: selectedRecord.image.replace(/\/upload/, "/upload/") },
      ]);
      setFileList1([
        {
          url: selectedRecord.inspectannuallyProve.replace(
            /\/upload/,
            "/upload/"
          ),
        },
      ]);
      setFileList2([
        {
          url: selectedRecord.annualInsuranceImg.replace(
            /\/upload/,
            "/upload/"
          ),
        },
      ]);
      setVstatusSwitch(selectedRecord.vstatus === 1);
    }
  }, [editMode, selectedRecord, form]);
  useEffect(() => {
    if (!editMode) {
      form.resetFields();
    }
  }, [editMode, form, vstatusSwitch]);
  return (
    <Form
      name="validate_other"
      {...formItemLayout}
      onFinish={onFinish}
      style={{ minWidth: 600 }}
      layout="horizontal"
      form={form}
    >
      <Row gutter={16}>
        <Col span={12}>
          <Form.Item
            name="vname"
            label="车型"
            hasFeedback
            rules={[{ required: true, message: "请输入车型" }]}
          >
            <Select placeholder="请选择车型">
              {vesearch.map((item: any) => {
                return (
                  <Select.Option key={item.cid} value={`${item.cxname}/${item.brand}/${item.style}/${item.year}/${item.seats}/${item.boxtype}/${item.displacement}/${item.TransmissionType}`}>
                    {`${item.cxname}/${item.brand}/${item.style}/${item.year}/${item.seats}/${item.boxtype}/${item.displacement}/${item.TransmissionType}`}
                  </Select.Option>
                );
              })}
            </Select>
          </Form.Item>
        </Col>
      </Row>
      <Row gutter={16}>
        <Col span={12}>
          <Form.Item
            name="platenumber"
            label="车牌号"
            rules={[{ required: true, message: "请输入车牌号" }]}
          >
            <Input style={{ width: 200 }} />
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item
            name="frame"
            label="车架号"
            rules={[{ required: true, message: "请输入车架号" }]}
          >
            <Input style={{ width: 200 }} />
          </Form.Item>
        </Col>
      </Row>
      <Row gutter={16}>
        <Col span={12}>
          <Form.Item label="所属门店" name="sid" rules={[{ required: true }]}>
            <Select placeholder="请选择门店">
              {Store.map((item: any) => {
                return (
                  <Select.Option key={item.id} value={item.id}>
                    {item.name}
                  </Select.Option>
                );
              })}
            </Select>
          </Form.Item>
        </Col>

        <Col span={12}>
          <Form.Item
            name="mileage"
            label="公里数"
            rules={[{ required: true, message: "请输入公里数" }]}
          >
            <Input style={{ width: 200 }} />
          </Form.Item>
        </Col>
      </Row>
      <Row gutter={16}>
        <Col span={12}>
          <Form.Item
            name="capacity"
            label="油箱容量"
            rules={[{ required: true, message: "请输入油箱容量" }]}
          >
            <Input style={{ width: 200 }} />
          </Form.Item>
        </Col>

        <Col span={12}>
          <Form.Item
            name="colour"
            label="车身颜色"
            rules={[{ required: true, message: "请选择车身颜色" }]}
          >
            <Select placeholder="请选择颜色" style={{ width: 200 }}>
              <Option value="白色">白色</Option>
              <Option value="黑色">黑色</Option>
            </Select>
          </Form.Item>
        </Col>
      </Row>
      <Row gutter={16}>
        <Col span={12}>
          <Form.Item
            name="engineNo"
            label="发动机号"
            rules={[{ required: true, message: "请输入发动机号" }]}
          >
            <Input style={{ width: 200 }} />
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item
            name="constructiontime"
            label="建造时间"
            rules={[{ required: true, message: "请选择建造时间" }]}
          >
            <DatePicker style={{ width: 200 }} />
          </Form.Item>
        </Col>
      </Row>
      <Row gutter={16}>
        <Col span={12}>
          <Form.Item name="image" label="车型照片">
            <>
              <Upload
                action="https://run.mocky.io/v3/435e224c-44fb-4773-9faf-380c5e6a2188"
                listType="picture-card"
                fileList={fileList}
                onChange={handleChange}
                onPreview={() => setPreviewOpen(true)}
              >
                {fileList?.length ? null : uploadButton}
              </Upload>
              <Modal open={previewOpen} footer={null} onCancel={handleCancel}>
                <img
                  alt="example"
                  style={{ width: "100%" }}
                  src={modifiedImageUrl}
                />
              </Modal>
            </>
          </Form.Item>
        </Col>
      </Row>
      <Row gutter={16}>
        <Col span={12}>
          <Form.Item
            name="inspectannuallyDate"
            label="年检到期时间"
            rules={[{ required: true, message: "请选择年检到期时间" }]}
            style={{ width: "400px" }}
          >
            <DatePicker style={{ width: "200px", marginLeft: "5px" }} />
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item
            name="inspectannuallyProve"
            label="上传年检证明"
            style={{ width: "500px" }}
          >
            <>
              <Upload
                action="https://run.mocky.io/v3/435e224c-44fb-4773-9faf-380c5e6a2188"
                listType="picture-card"
                fileList={fileList1}
                onChange={handleChange1}
                onPreview={() => setPreviewOpen1(true)}
              >
                {fileList1?.length ? null : uploadButton}
              </Upload>
              <Modal open={previewOpen1} footer={null} onCancel={handleCancel1}>
                <img
                  alt="example"
                  style={{ width: "100%" }}
                  src={modifiedImageUrl1}
                />
              </Modal>
            </>
          </Form.Item>
        </Col>
      </Row>
      <Row gutter={16}>
        <Col span={12}>
          <Form.Item
            name="annualInsuranceDate"
            label="车保到期时间"
            rules={[{ required: true, message: "请选择车保到期时间" }]}
            style={{ width: "400px" }}
          >
            <DatePicker style={{ width: "200px", marginLeft: "5px" }} />
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item
            name="annualInsuranceImg"
            label="上传保单"
            style={{ width: "500px" }}
          >
            <>
              <Upload
                action="https://run.mocky.io/v3/435e224c-44fb-4773-9faf-380c5e6a2188"
                listType="picture-card"
                fileList={fileList2}
                onChange={handleChange2}
                onPreview={() => setPreviewOpen2(true)}
              >
                {fileList2?.length ? null : uploadButton}
              </Upload>
              <Modal open={previewOpen2} footer={null} onCancel={handleCancel2}>
                <img
                  alt="example"
                  style={{ width: "100%" }}
                  src={modifiedImageUrl2}
                />
              </Modal>
            </>
          </Form.Item>
        </Col>
      </Row>
      <Form.Item name="vstatus" label="运营状态" style={{ width: "500px" }}>
        <Switch checked={vstatusSwitch} onChange={onSwitchChange} />
      </Form.Item>
      <Form.Item wrapperCol={{ span: 18, offset: 6 }}>
        <Space>
          {editMode ? (
            <Button type="primary" htmlType="submit">
              修改
            </Button>
          ) : (
            <Button type="primary" htmlType="submit">
              提交
            </Button>
          )}
          <Button htmlType="reset">重置</Button>
        </Space>
      </Form.Item>
    </Form>
  );
};

export default VehicleForm;
